<template>
  <div>
    <up-down-layout :header="'组织机构列表'" :handleFlag="true" :isSearch="false">
      <template slot="table">
        <div class="orgMain">
          <div class="orgTree" >
            <p>组织机构树
              <i class="el-icon-refresh" @click="refresh"></i>
            </p>
            <div v-loading="treeLoading">
              <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
              node-key="id"></el-tree>
            </div>
          </div>
          <div class="orgTable">
            <!-- table表格 -->
            <data-table :toolMenuFlag="true" :menuFlag="false" :sourceData="sourceData" :queryParas="queryParas"
              @onEditRow="onEditRow" @onCreateRow="addData" :operateBtnLayout="operateBtnLayout" :operatWidth="'120px'"
              :columns="columns" :deleteApi="api" :api="api" :loadCount="loadCount"
              >
            </data-table>
          </div>
        </div>
      </template>
    </up-down-layout>
    <!-- 组织机构新增编辑查看弹框 -->
    <orgEdit :editModel="editModel" :visible.sync="dialogVisible" v-if="dialogVisible" :api="api" :form="item" @handSearch="handleFilter"/>
  </div>
</template>
<script>
  import BaseManage from '@/pages/baseManage'
  import upDownLayout from '@/components/element/upDownLayout'
  import searchForm from '@/components/element/searchForm'
  import DataTable from '@/components/element/DataTable'
  import { sysOrg } from '@/api/platformApi'
  import orgEdit from './orgEdit'
  import { formatDict } from '@/filters/index'
  export default {
    // 继承baseManage里的公共方法和定义的属性
    extends: new BaseManage(),
    name: 'orgManage',
    components: {
      upDownLayout,
      searchForm,
      DataTable,
      orgEdit
    },
    data () {
      return {
        // 选择查询区域的字段对象
        queryParas: {
          parentId: ''
        },
        // talbe显示的每一项
        columns: [
          {
            prop: 'name',
            label: '机构名称',
            width: '110px',
            align: 'left'
          },
          {
            prop: 'code',
            label: '机构编码',
            width: '110px'
          },
          {
            prop: 'type',
            label: '机构类型',
            width: '110px',
            format: row => { return formatDict(row.type, 'org_type') }
          },
          {
            prop: 'grade',
            label: '机构级别',
            width: '110px',
            format: row => { return formatDict(row.grade, 'org_class') }
          },
          {
            prop: 'useable',
            label: '是否可用',
            align: 'center',
            format: row => { return formatDict(row.useable, 'useable') }
          }
        ],
        operateBtnLayout: 'C,E,V,D',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        treeLoading: false
      }
    },
    computed: {
      api () {
        return sysOrg
      }
    },
    mounted () {
      this.getOrgTreeAll()
    },
    methods: {
      // 查询组织机构树
      getOrgTreeAll () {
        this.treeLoading = true
        sysOrg.officeTreeAll().then(res => {
          this.treeData = res.data
          this.treeLoading = false
        }).catch(err => {
          this.error(err)
          this.treeLoading = false
        })
      },
      // 清空组织机构选择条件
      refresh () {
        this.getOrgTreeAll()
        this.clearParam()
        this.handleFilter()
      },
      handleNodeClick (data) {
        this.queryParas.parentId = data.value
        this.handleFilter()
      }
    }
  }
</script>
<style lang="scss" scoped>
.orgMain {
  display: flex;
  justify-content: space-between;
  // 组织机构
  .orgTree {
    width: 26%;
    border: 1px solid #e3e3e3;
    line-height: 35px;
    & > p {
      border-bottom: 1px solid #e3e3e3;
      padding-left: 10px;
      i {
        float: right;
        font-size: 20px;
        margin: 8px 10px 0 0;
        cursor: pointer;
      }
    }
    & > div {
      height: calc(70vh - 35px);
    }
  }
  .orgTable {
    width: 72%;
  }
}
</style>
